<template>
  <div class="order-detail-container">
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="order-detail-content">
      <van-cell-group inset>
        <van-cell :title="'订单号：' + order?.id" :value="getStatusText(order?.status)" />
        <van-cell title="下单时间" :value="formatDate(order?.createTime)" />
      </van-cell-group>
      
      <div class="order-items">
        <van-cell-group inset title="商品信息">
          <van-cell v-for="item in order?.items" :key="item.id">
            <template #title>
              <div class="item-info">
                <span>{{ item.name }}</span>
                <span class="quantity">x{{ item.quantity }}</span>
              </div>
            </template>
            <template #value>
              <span class="price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
            </template>
          </van-cell>
          <van-cell title="总计" :value="'¥' + order?.total.toFixed(2)" />
        </van-cell-group>
      </div>
      
      <div class="order-actions">
        <van-button
          v-if="order?.status === 'pending'"
          round
          block
          type="primary"
          @click="onPay"
        >
          继续支付
        </van-button>
        <van-button
          v-if="canCancel"
          round
          block
          type="danger"
          @click="onCancel"
        >
          取消订单
        </van-button>
        <van-button
          v-if="order?.status === 'completed'"
          round
          block
          type="danger"
          @click="onDelete"
        >
          删除订单
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useOrderStore } from '../stores/order'
import { showDialog } from 'vant'

const route = useRoute()
const router = useRouter()
const orderStore = useOrderStore()

const order = computed(() => {
  return orderStore.orders.find(o => o.id === route.params.id)
})

const getStatusText = (status) => {
  const statusMap = {
    pending: '待付款',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString()
}

const canCancel = computed(() => {
  if (!order.value || order.value.status !== 'pending') return false
  const orderTime = new Date(order.value.createTime)
  const now = new Date()
  const hours = (now - orderTime) / (1000 * 60 * 60)
  return hours <= 2
})

const onClickLeft = () => {
  router.back()
}

const onPay = () => {
  router.push(`/payment?orderId=${order.value.id}`)
}

const onCancel = () => {
  showDialog({
    title: '取消订单',
    message: '确定要取消该订单吗？',
    showCancelButton: true
  }).then(() => {
    orderStore.updateOrderStatus(order.value.id, 'cancelled')
    router.back()
  })
}

const onDelete = () => {
  showDialog({
    title: '删除订单',
    message: '确定要删除该订单吗？',
    showCancelButton: true
  }).then(() => {
    orderStore.deleteOrder(order.value.id)
    router.back()
  })
}
</script>

<style scoped>
.order-detail-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.order-detail-content {
  padding: 20px;
}

.order-items {
  margin-top: 20px;
}

.item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quantity {
  color: #999;
  margin-left: 10px;
}

.price {
  color: #f44;
}

.order-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style> 